<!--直播组件-->
<!--添加瀑布流-->
<template>
  <div class="micro-broadcast-ad-box">
    <!-- <div class="title-text-content">
      <div class="title-text-title">
        <div class="title-text-title-left">
          <span>{{ formData.title }}</span>
          <i class="el-icon-arrow-right"></i>
        </div>
        <div class="title-look">查看更多></div>
      </div>
    </div> -->
    <!--预览控制区-->
    <div class="design-preview-controller" :class="formData.indicator===2?'preview-controller-two':''" :style="{color:formData.textColor,background:formData.bgColor,margin:`${formData.marginTop/2}px ${formData.margins/2}px ${formData.marginBottom/2}px`}">
      <div v-for="(item,index) in formData.broadcastList" :key="index" class="preview-broadcast">
        <!-- :style="{background:`url(${item.feedsUrl || item.imgUrl}) center center no-repeat`}" -->
        <div class="preview-broadcast-img">
          <img class="liveImg" :src="item.feedsUrl || item.imgUrl" alt="" srcset="">
          <div v-show="formData.isGroup">{{ item.groupName }}</div>
          <div v-show="formData.isForecast" class="liveststusPosition" :style="{left: formData.indicator===1? '78%':'60%'}">{{ item.liveStatus == 0? '未开始' : item.liveStatus == 1? '直播中...' : '已结束' }}</div>
        </div>
        <!-- <div class="preview-broadcast-title" v-show="formData.isTitle" :style="{color:formData.textColor}">{{item.title}}</div>
        <div class="preview-broadcast-zy" v-show="formData.isAbstract">{{item.remark}}</div> -->
        <div v-show="formData.isName" class="preview-broadcast-title">{{ item.roomName }}</div>
        <div v-show="formData.isAbstract" class="preview-broadcast-zy">{{ item.remark }}</div>
        <div class="preview-broadcast-content">
          <div class="foot-content-left">
            <span v-show="formData.isAnchor">{{ item.anchorName }}</span>
          </div>
          <div class="foot-content-right">
            <div v-show="formData.isRead" class="el-icon-view"> {{ item.seeNum }}</div>
            <div v-show="formData.isHelp" class="el-icon-thumb"> {{ item.likeNum }}</div>
            <div v-show="formData.isComment" class="el-icon-chat-dot-round"> {{ item.commentNum }}</div>
          </div>
        </div>
      </div>
    </div>
    <!--编辑工作区-->
    <div v-show="isShowEdit" class="design-editor-item design-hide-class">
      <el-scrollbar wrap-class="scroll-content">
        <div class="rightWrap">
          <div class="design-editor-component-title">直播</div>
          <div class="tabRadioWrap">
            <el-radio-group v-model="formData.indicator">
              <el-tooltip v-for="(item,index) in tabList" :key="index" effect="dark" :content="item.title" placement="bottom">
                <el-radio-button :label="index + 1">
                  <span :class="[item.icon]" />
                </el-radio-button>
              </el-tooltip>
            </el-radio-group>
          </div>
          <el-tabs v-model="tabActive" tab-position="top" style="marginTop: 10px;">
            <el-tab-pane label="内容设置" name="0">
              <div class="dis al_item dis_ju_spb setWrap">
                <div class="couponTitle">分组设置</div>
                <span class="desc">最多10张，可拖动排序</span>
              </div>
              <div class="styleWrap styleWrap-padding">
                <div class="dis dis_ju_spb al_item w100e item_mar">
                  <div>直播源</div>
                  <el-radio-group v-model="source" size="small">
                    <el-radio :label="1">手动添加</el-radio>
                    <el-radio :label="2">自动添加</el-radio>
                  </el-radio-group>
                </div>
                <div class="broadcastList">
                  <draggable v-model="formData.broadcastList">
                    <transition-group>
                      <div v-for="(item,index) in formData.broadcastList" :key="item.id" class="broadcast-item">
                        <span><i class="broadcast-item-icon el-icon-s-operation" /> 直播：{{ item.roomName }}</span>
                        <i class="el-icon-circle-close" v-show="!item.isChose && item.isChose != 1" @click="closeCoupon(index)" />
                      </div>
                    </transition-group>
                  </draggable>
                  <div class="add-coupon-btn" @click="addBroadcast">
                    <i class="el-icon-plus" /><span>添加直播源</span>
                  </div>
                </div>
                <div class="btn-style">
                  <el-radio-group v-model="formData.style" size="small" disabled>
                    <el-radio v-for="(item,index) in 4" :key="index" :label="item">样式{{ item }}</el-radio>
                  </el-radio-group>
                </div>
                <div class="dis dis_ju_spb al_item w100e item_mar">
                  <div>直播间名称</div>
                  <el-radio-group v-model="formData.isName" size="small">
                    <el-radio-button :label="true">显示</el-radio-button>
                    <el-radio-button :label="false">隐藏</el-radio-button>
                  </el-radio-group>
                </div>
                <div class="dis dis_ju_spb al_item w100e item_mar">
                  <div>摘要</div>
                  <el-radio-group v-model="formData.isAbstract" size="small">
                    <el-radio-button :label="true">显示</el-radio-button>
                    <el-radio-button :label="false">隐藏</el-radio-button>
                  </el-radio-group>
                </div>
                <div class="dis dis_ju_spb al_item w100e item_mar">
                  <div>主播</div>
                  <el-radio-group v-model="formData.isAnchor" size="small">
                    <el-radio-button :label="true">显示</el-radio-button>
                    <el-radio-button :label="false">隐藏</el-radio-button>
                  </el-radio-group>
                </div>
                <div class="dis dis_ju_spb al_item w100e item_mar">
                  <div>观看人数</div>
                  <el-radio-group v-model="formData.isRead" size="small">
                    <el-radio-button :label="true">显示</el-radio-button>
                    <el-radio-button :label="false">隐藏</el-radio-button>
                  </el-radio-group>
                </div>
                <div class="dis dis_ju_spb al_item w100e item_mar">
                  <div>点赞数</div>
                  <el-radio-group v-model="formData.isHelp" size="small">
                    <el-radio-button :label="true">显示</el-radio-button>
                    <el-radio-button :label="false">隐藏</el-radio-button>
                  </el-radio-group>
                </div>
                <div class="dis dis_ju_spb al_item w100e item_mar">
                  <div>评论数</div>
                  <el-radio-group v-model="formData.isComment" size="small">
                    <el-radio-button :label="true">显示</el-radio-button>
                    <el-radio-button :label="false">隐藏</el-radio-button>
                  </el-radio-group>
                </div>
                <div class="dis dis_ju_spb al_item w100e item_mar">
                  <div>预告标签</div>
                  <el-radio-group v-model="formData.isForecast" size="small">
                    <el-radio-button :label="true">显示</el-radio-button>
                    <el-radio-button :label="false">隐藏</el-radio-button>
                  </el-radio-group>
                </div>
                <div class="dis dis_ju_spb al_item w100e item_mar">
                  <div>分组标签</div>
                  <el-radio-group v-model="formData.isGroup" size="small">
                    <el-radio-button :label="true">显示</el-radio-button>
                    <el-radio-button :label="false">隐藏</el-radio-button>
                  </el-radio-group>
                </div>
              </div>
            </el-tab-pane>
            <el-tab-pane label="样式设置" name="1">
              <div class="styleWrap">
                <div class="titleStyle">内容样式</div>
                <div class="dis dis_ju_spb al_item w100e item_mar">
                  <div>文字颜色</div>
                  <el-color-picker v-model="formData.textColor" />
                </div>
                <div class="dis dis_ju_spb al_item w100e item_mar">
                  <div>背景颜色</div>
                  <el-color-picker v-model="formData.bgColor" />
                </div>
              </div>
              <div class="styleWrap">
                <div class="titleStyle">组件样式</div>
                <div class="dis al_item dis_ju_spb w100e item_mar">
                  <div class="dis al_item">
                    <span>页边距</span>
                    <span class="text_mar">{{ formData.margins }}px</span>
                  </div>
                  <el-radio-group v-model="formData.margins" size="small">
                    <el-radio-button :label="0">无</el-radio-button>
                    <el-radio-button :label="30">有</el-radio-button>
                  </el-radio-group>
                </div>
                <div class="dis al_item dis_ju_spb w100e item_mar">
                  <div class="dis al_item">
                    <span>上边距</span>
                    <span class="text_mar">{{ formData.marginTop }}px</span>
                  </div>
                  <el-radio-group v-model="formData.marginTop" size="small">
                    <el-radio-button label="0">小</el-radio-button>
                    <el-radio-button label="15">中</el-radio-button>
                    <el-radio-button label="30">大</el-radio-button>
                  </el-radio-group>
                </div>
                <div class="dis al_item dis_ju_spb w100e item_mar">
                  <div class="dis al_item">
                    <span>下边距</span>
                    <span class="text_mar">{{ formData.marginBottom }}px</span>
                  </div>
                  <el-radio-group v-model="formData.marginBottom" size="small">
                    <el-radio-button label="0">小</el-radio-button>
                    <el-radio-button label="15">中</el-radio-button>
                    <el-radio-button label="30">大</el-radio-button>
                  </el-radio-group>
                </div>
              </div>
            </el-tab-pane>
          </el-tabs>
        </div>
      </el-scrollbar>
    </div>
    <!-- 选择直播源弹窗 -->
    <chooseLiveGroups :liveDialogIsShow="liveDialogIsShow" :dataList="dataList" :hasCheckboxGroup="hasCheckboxGroup" @finish="finish" @close="close"/>
  </div>
</template>
<script>
import index from './index.js'

export default index
</script>
